<template>
  <div class="addEvent">
    <el-button type="text" @click="activeAdd">事件添加</el-button>
    <el-dialog title="事件添加" :visible.sync="dialogFormVisible" width="350px">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="事件编号" prop="SJid">
          <el-input v-model="form.SJid"></el-input>
        </el-form-item>
        <el-form-item label="事件类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择事件类型">
            <el-option label="碰撞" value="碰撞"></el-option>
            <el-option label="刮擦" value="刮擦"></el-option>
            <el-option label="失火" value="失火"></el-option>
            <el-option label="翻车" value="翻车"></el-option>
            <el-option label="碾压" value="碾压"></el-option>
            <el-option label="其它" value="其它"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级" prop="level">
          <el-select v-model="form.level" placeholder="请选择事件等级">
            <el-option label="轻微事故" value="0"></el-option>
            <el-option label="一般事故" value="1"></el-option>
            <el-option label="重大事故" value="2"></el-option>
            <el-option label="特大事故" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发生时间" prop="datetime">
          <el-date-picker
            v-model="form.datetime"
            value-format="yyyy.M.d H:m:s"
            type="datetime"
            placeholder="选择日期时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="事件地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>

        <el-form-item label="车辆牌号" prop="number">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="司机名字" prop="user">
          <el-input v-model="form.user"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit('form')">确 定</el-button>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
var map;
var source;
var draw;
var layer;
var docLayer;
var position;
import { createDraw } from "../../utils/Draw";
import Bus from "../../utils/bus";
// import { addPoint } from "../../utils/addPoint";
export default {
  data() {
    return {
      addValue: [],
      dialogFormVisible: false,
      form: {
        SJid: "",
        type: "",
        level: "",
        datetime: "",
        address: "",
        number: "",
        user: "",
      },
      formLabelWidth: "120px",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime();
        },
      },
      rules: {
        SJid: [
          { required: true, message: "请输入编号", trigger: "blur" },
          {
            message: "请输入编号",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请选择事件类型", trigger: "change" },
        ],
        level: [
          {
            required: true,
            message: "请选择事件等级",
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: "请填写活动形式", trigger: "blur" },
        ],
        datetime: [
          {
            // validator: checkTime,
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        number: [{ required: true, message: "请填写车牌号", trigger: "blur" }],
        user: [
          { required: true, message: "请填写驾驶员名字", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    Bus.$on("Add", () => {
      this.activeAdd();
    });
  },
  methods: {
    activeAdd() {
      var that = this;
      map = this.$store.state.map;
      docLayer = this.$store.state.docLayer;
      /* 1、激活画布,获取坐标 */
      source = new ol.source.Vector({
        wrapX: false,
      });
      layer = new ol.layer.Vector({
        source,
      });
      map.addLayer(layer);
      draw = createDraw({
        type: "Point",
        source,
        callback: this.handleDraw,
      });
      map.addInteraction(draw);
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("添加成功");
        } else {
          return false;
        }
        this.dialogFormVisible = false;
        console.log(this.form);
      });
      var that = this;

      // addPoint({
      //   position,
      //   attr: [
      //     {
      //       key: [
      //         "事件编号",
      //         "事件类型",
      //         "事件等级",
      //         "发生时间",
      //         "发生地点",
      //         "车牌号",
      //         "驾驶员",
      //         "处理状态",
      //       ],
      //       value: [
      //         "sj202206021401",
      //         "失火",
      //         2,
      //         "2022.6.2 14:00:00",
      //         "鲁磨路",
      //         "鄂B0001",
      //         "张大仙",
      //         1,
      //       ],
      //       type: [
      //         "string",
      //         "string",
      //         "int",
      //         "string",
      //         "string",
      //         "string",
      //         "string",
      //         "int",
      //       ],
      //     },
      //   ],
      //   service: {
      //     name: "guanggu",
      //     layerId: 3,
      //   },
      //   layer: that.$store.state.docLayer,
      // });
      var gpoint = new Zondy.Object.GPoint(position[0], position[1]); //createPoint();
      //设置当前点要素的几何信息
      var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] });
      //描述点要素的符号参数信息
      var pointInfo = new Zondy.Object.CPointInfo({
        Angle: 0,
        Color: 11,
        Space: 0,
        SymHeight: 8,
        SymID: 31, //子图号
        SymWidth: 8,
      });
      //设置当前点要素的图形参数信息
      var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
        InfoType: 1,
        PntInfo: pointInfo,
      });
      for (var value in that.form) {
        that.addValue.push(that.form[value]);
      }
      //设置添加点要素的属性信息
      console.log(that.addValue);
      var attValue = that.addValue;
      // var attValue = [
      //   "sj202206021401",
      //   "失火",
      //   2,
      //   "2022.6.2 14:00:00",
      //   "鲁磨路",
      //   "鄂B0001",
      //   "张大仙",
      //   1,
      // ];
      //创建一个要素
      var feature = new Zondy.Object.Feature({
        fGeom: fGeom,
        GraphicInfo: webGraphicInfo,
        AttValue: attValue,
      });
      //设置要素为点要素
      feature.setFType(1);
      //创建一个要素数据集
      var featureSet = new Zondy.Object.FeatureSet();
      //设置属性结构
      var cAttStruct = new Zondy.Object.CAttStruct({
        FldName: [
          "事件编号",
          "事件类型",
          "事件等级",
          "发生时间",
          "发生地点",
          "车牌号",
          "驾驶员",
          "处理状态",
        ],
        FldNumber: 8,
        FldType: [
          "string",
          "string",
          "int",
          "string",
          "string",
          "string",
          "string",
          "int",
        ],
      });
      featureSet.AttStruct = cAttStruct;
      //添加要素到要素数据集
      featureSet.addFeature(feature);
      var editService = new Zondy.Service.EditDocFeature("guanggu", 3, {
        ip: "localhost",
        port: "6163", //访问IGServer的端口号，.net版为6163，Java版为8089
      });
      //执行添加点要素功能
      editService.add(featureSet, onPntSuccess);
      //添加点要素回调函数
      function onPntSuccess(data) {
        if (data.succeed) {
          alert("添加点要素成功！");
          docLayer.refresh();
        } else {
          alert("添加点要素失败！");
        }
      }
    },
    handleDraw(e) {
      this.dialogFormVisible = true;
      position = e.feature.getGeometry().getCoordinates();
      map.removeLayer(layer);
      map.removeInteraction(draw);
    },
  },
};
</script>

<style>
.addEvent {
  cursor: pointer;
}

.el-date-editor.el-input,
.el-select {
  width: 230px;
}
</style>
